;(function (name) {
    window.components = window.components || {}
    window.components[name] = {
        props: {
            id: {
                type: String
            },
            clipboard: {
                type: Object
            }
        },
        name,
        data() {
            return {
                terminal: {},
                selectedText: ''
            }
        },
        mounted() {
            if (window.isInit) {
                this.init()
            } else {
                window.addEventListener('init', this.init)
            }
            window.addEventListener('write', event => {
                const { id, data } = event.detail
                if (id == this.id) {
                    this.write(data)
                }
            })
            window.addEventListener('clear', event => {
                const { id } = event.detail
                if (id == this.id) {
                    this.clear()
                }
            })
        },
        unmounted() {
            this.$emit('close', this.id)
        },
        methods: {
            init() {
                this.terminal = new Terminal()
                const fitAddon = new window.FitAddon.FitAddon()
                const canvasAddon = new CanvasAddon.CanvasAddon()
                const webLinks = new WebLinksAddon.WebLinksAddon()
                this.terminal.loadAddon(fitAddon)
                this.terminal.loadAddon(canvasAddon)
                this.terminal.loadAddon(webLinks)
                const node = this.$refs.terminal
                this.terminal.open(node)
                this.terminal.onData(data => {
                    this.$emit('input', {
                        id: this.id,
                        data: data.toString()
                    })
                })
                this.terminal.onSelectionChange(selectedText => {
                    if (this.terminal.hasSelection()) {
                        this.selectedText = this.terminal.getSelection()
                    }
                    console.log(selectedText)
                    console.log(this.terminal.getSelection())
                })
                fitAddon.fit()
                window.addEventListener('resize', () => {
                    fitAddon.fit()
                })
                this.$emit('open', this.id)
            },
            write(data) {
                this.terminal.write(data)
            },
            clear() {
                this.terminal.clear()
            },
            async contextmenu() {
                if (this.terminal.hasSelection()) {
                    const text = this.terminal.getSelection()
                    await this.clipboard?.writeText(text)
                    this.terminal.clearSelection()
                } else {
                    const text = await this.clipboard?.readText()
                    this.write(text)
                }
            }
        },
        template: '<div ref="terminal" :id="id" @contextmenu.prevent="contextmenu"></div>'
    }
})('terminal')
